<template>
	<view id="main">
		<view class="headerimg">
			<image :src="workarea" mode="widthFix"></image>
		</view>
		
		<view class="work" id="workstate" :class="topindex>=headerheight?'suspended-top':''">
			<view class="initiate" @tap="started" hover-class="com-hover-icon">
				<view class="initiatecount">
					<text class="iconfont icon-ym-wofaqide"></text>
				</view>
				<view class="color-3A3A3A">我发起的</view>
			</view>
			<view class="initiate" @tap="backlog" hover-class="com-hover-icon">
				<view class="initiatecount">
					<text class="iconfont icon-ym-daibanshixiang"></text>
				</view>
				<view class="color-3A3A3A">待办事项</view>
			</view>
			<view class="initiate" @tap="alreadybacklog" hover-class="com-hover-icon">
				<view class="initiatecount">
					<text class="iconfont icon-ym-yibanshixiang"></text>
				</view>
				<view class="color-3A3A3A">已办事项</view>
			</view>
			<view class="initiate" @tap="copyme" hover-class="com-hover-icon">
				<view class="initiatecount">
					<text class="iconfont icon-ym-chaosongwode"></text>
				</view>
				<view class="color-3A3A3A">抄送我的</view>
			</view>
		</view>
		
		<view class="uni-grid">
			<view class="grid-9 jn-com-part" v-for="(items,key) in flowdata" :key="key">
				<view class="jn-com-main">
					<view class="common">
						<text>
							{{items.fullName}}
						</text>
					</view>
					<view class="uni-grid-9 padding-bottom30">
						<view class="uni-grid-9-item" hover-class="uni-grid-9-item-hover" v-for="(item,index) in items.data" :key="index"
						 @click="flowform(item,$event)">
							<view class="uni-grid-9-ico" :style="{'background':item.F_IconBackground|| '#008cff'}">
								<view class="icon-box-lin">
									<label class="font-size60" :class="item.F_Icon" style="color: #FFFFFF;"/>
								</view>
							</view>
							<text class="uni-grid-9-text" :class="item.F_FullName.length>5?'overflow-text':''">{{item.F_FullName}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="noContent" v-if="isData" style="padding-top: 150rpx;">
			<img :src="nodata" alt="">
			<view class="">
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	import jnpf from '@/common/js/jnpf.js'
	import helper from '@/common/js/helper.js'
	import config from '@/common/js/config.js'
	export default {
		data() {
			return {
				flowdata: [],
				topindex: '',
				headerheight: 135,
				workheight: '',
				flowEngines: [],
				startedrow: 0,
				backlogrow: 0,
				alreadybacklogrow: 0,
				copymerow: 0,
				workarea: config.Resources.banner.workarea,
				timeStamp: 0,
				nodata: config.Resources.message.nodata,
				isData: false,
			}
		},
		computed: {
			suspendedTop() {
				return this.workheight
			}
		},
		onLoad () {
			uni.showLoading({ //loading提示框
				title: '加载中...',
				mask: true
			});
			let _slfe = this;
			setTimeout(function() {
				try {
					const _data = uni.getStorageSync(config.Global.cache + '_FlowEngineList');
					if(_data == ''){
						_slfe.isData = true;
						return
					}
					_slfe.isData = false
					if (_data) {
						let groupData = jnpf.dictionaryData("WorkFlowCategory");
						for (let category in groupData) {
							let childNodes = helper.jsonFind(_data, function(v) {
								return v.F_Category == groupData[category].value
							});
							if(childNodes.length>0){
								_slfe.flowdata.push({
									id: category,
									fullName:groupData[category].label,
									data: childNodes
								})
							}
						}
					}
				} catch (e) {}
			}, 200);
			uni.hideLoading();
		},
		onPageScroll(e) {
			this.topindex = e.scrollTop;
		},
		mounted() {
			let _this = this;
			let work = uni.createSelectorQuery().select(".work");
			work.boundingClientRect(data => {
				_this.workheight = data.height;
			}).exec();
		},
		methods: {
			started() {
				uni.navigateTo({
					url: '../operate/started/started',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			backlog() {
				uni.navigateTo({
					url: '../operate/backlog/backlog',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			alreadybacklog() {
				uni.navigateTo({
					url: '../operate/alreadybacklog/alreadybacklog',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			copyme() {
				uni.navigateTo({
					url: '../operate/copyme/copyme',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			flowform(e, event) {
				
				uni.setStorageSync('F_FullName',e.F_FullName)
				uni.setStorageSync("F_Category",e.F_Category)
				
				// #ifdef MP
				if (this.timeStamp == 0) {
					this.timeStamp = event.timeStamp;
				} else {
					if (event.timeStamp - this.timeStamp < 800) {
						return;
					}
					this.timeStamp = event.timeStamp;
				}
				// #endif
				// #ifndef MP
				if (this.timeStamp == 0) {
					this.timeStamp = event.mp.timeStamp;
				} else {
					if (event.mp.timeStamp - this.timeStamp < 800) {
						return;
					}
					this.timeStamp = event.mp.timeStamp;
				}
				// #endif
				let flowname = e.F_EnCode.toLowerCase();
				let flowInfo = {
					operstate: 'add',
					id: e.F_Id,
					initId:e.F_Id,
					status:0
				}
				let url = '/pages/work/flowchart/' + flowname + '/' + 'form?flowInfo=' + JSON.stringify(flowInfo);
				if(e.F_FormType==2){
					url = '/pages/work/flowchart/dynamic/form?flowInfo=' + JSON.stringify(flowInfo)
				}
				uni.navigateTo({
					url: url,
					success: res => {
						
					},
					fail: (err) => {
						helper.msg("暂无此页面")
					}
					
				});
			},
		}
	}
</script>

<style>
	page {
		background-color: #f0f2f6;
	}

	.headerimg {
		width: 100%;
		height: 380upx;
	}

	.headerimg image {
		width: 100%;
		height: 100%;
	}

	.work {
		width: 95%;
		margin: 0 auto;
		border-radius: 20rpx;
		overflow: hidden;
		height: 190upx;
		align-content: center;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: -80rpx;
	}

	.common::after {
		content: "";
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		left: 0rpx;
		height: 1px;
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.iconlabel {
		position: absolute;
		left: 55%;
		top: 10%;
	}

	.common text {
		vertical-align: middle;
		font-size: 36upx;
		font-weight: 500;
		color: #3a3a3a;
	}

	.box-title {
		vertical-align: middle;
		font-size: 19px;
		font-weight: 500;
		color: #000000;
		border-bottom: 1px solid #DBDBDB;
	}

	.initiate {
		text-align: center;
		width: 25%;
		height: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		position: relative;

	}

	.initiatecount {
		font-size: 42upx;
		font-family: 微软雅黑;
		font-weight: bold;
		color: #3A3A3A;
		line-height: normal;
	}

	.initiatecount .iconfont {
		color: #3281FF;
		font-size: 60rpx;
		font-weight: normal;
	}

	.administrative {
		align-content: center;
		background-color: #fff;
		margin-top: 20upx;
		padding-left: 20upx;
	}

	.titletext {
		font-size: 32upx;
		height: 100upx;
	}

	.uni-grid-9 {
		border-top: 0 !important;
	}

	.uni-grid {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
		margin-top: 20upx;
	}

	.mark {
		text-align: center;
		font-size: 24upx;
		vertical-align: hiddle;
	}

	.margin-top-267 {
		margin-top: 267upx;
	}
</style>
